<template>
  <div id="produceView" class="produce-demo" />

</template>
<script setup>
// 引入echart和json数据
import * as echarts from 'echarts'
import { onMounted, watch } from 'vue'
const props = defineProps({
  produceData: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
watch(() => props.produceData, (n, o) => {
  setOption(props.produceData)
})
// 设置echart数据
const setOption = (res) => {
  var chartDom = document.getElementById('produceView')
  var myChart = echarts.init(chartDom)
  var option = {
    series: [
      {
        type: 'gauge',
        center: ['50%', '90%'],
        radius: '140%',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 5,
        itemStyle: {
          color: '#FA8300'
        },
        progress: {
          show: true,
          width: 8
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: 8,
            color: [[1, '#FA830050']],
          }
        },
        axisTick: {
          distance: 0,
          splitNumber: 4,
          lineStyle: {
            width: 1,
            color: '#ECAA6490'
          }
        },
        splitLine: {
          distance: 14,
          length: 8,
          show: false,
          lineStyle: {
            width: 1,
            color: '#ff0000'
          }
        },
        axisLabel: {
          distance: -35,
          color: '#ECAA6490',
          fontSize: 10
        },
        anchor: {
          show: false
        },
        title: {
          show: true,
          fontSize: 10,
          color: '#ECAA6490',
          offsetCenter: [0, '-10%'],
        },
        detail: {
          valueAnimation: true,
          width: '80%',
          lineHeight: 0,
          borderRadius: 8,
          offsetCenter: [0, '-45%'],
          fontSize: 13,
          formatter: '{value}%',
          color: '#FFD8AC'
        },
        data: [
          {
            value: res.ywcRate || 0,
            name: `完成情况${res.ywcNum || 0}/${res.totalNum || 0}`
          }
        ]
      }
    ]
  }
  myChart.clear()
  option && myChart.setOption(option)
}

onMounted(() => {
  // getProduce({ plantingPlanId: 82, farmId: 51 }).then((res) => {
  //   console.log(res, '------------pr')
  //   setOption(res.data)
  // })
})
</script>
<style lang="scss">
.produce-demo {
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-50%;
    z-index:99;
}
</style>
